<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link th:href="@{/css/new.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/msg-layer/naranja.min.css}">

</head>

<body class="gray-bg">
<!--右侧主体-->

<div class="main">


    <!--统计区域-->
    <div class="statistics-info">
        <div class="statistics-list clearfix">
            <div class="statistics-item1 col-xs-6 col-sm-4 col-lg-4">
                <div class="statistics-top-item">
                    <div class="left-btm">
                        <img class="left-icon" th:src="@{/img/statistics-icon-1.png}" alt="">
                    </div>
                    <div class="right-btm">
                        <div class="indro-title">今日气表值</div>
                        <div class="indro-number" th:text="${today}">13858 <span class="uint">(m³)</span></div>
                        <div class="indro-chan">同比昨日 <img class="indro-chan-icon" th:src="@{/img/statistics-down.png}">10%
                        </div>
                    </div>
                </div>
            </div>

            <div class="statistics-item1 col-xs-6 col-sm-4 col-lg-4">
                <div class="statistics-top-item">
                    <div class="left-btm">
                        <img class="left-icon" th:src="@{/img/statistics-icon-2.png}" alt="">
                    </div>
                    <div class="right-btm">
                        <div class="indro-title">本月天然气用量</div>
                        <div class="indro-number" th:text="${month}">13858 <span class="uint">(m³)</span></div>
                        <div class="indro-chan">同比上月 <img class="indro-chan-icon" th:src="@{/img/statistics-down.png}">10%
                        </div>
                    </div>
                </div>
            </div>

            <div class="statistics-item1 col-xs-6 col-sm-4 col-lg-4">
                <div class="statistics-top-item">
                    <div class="left-btm">
                        <img class="left-icon" th:src="@{/img/statistics-icon-3.png}" alt="">
                    </div>
                    <div class="right-btm">
                        <div class="indro-title">本年天然气用量</div>
                        <div class="indro-number" th:text="${year}">13858 <span class="uint">(m³)</span></div>
                        <div class="indro-chan">同比去年 <img class="indro-chan-icon" th:src="@{/img/statistics-up.png}">10%
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--图表区域-->
    <div class="chart-btm">
        <div class="echart-item col-sm-12">
            <div id="main" style="width:96%;height:350px;"></div>
        </div>
    </div>

</div>


<script th:src="@{/js/jquery.min.js}"></script>
<!--echart-->
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/webjars/sockjs-client/1.0.2/sockjs.min.js}"></script>
<script th:src="@{/webjars/stomp-websocket/2.3.3/stomp.min.js}"></script>
<script th:src="@{/msg-layer/naranja.js}"></script>

<script type="text/javascript" th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var xData = ['12.18', '12.19', '12.20', '12.21', '12.22', '12.23', '12.24', '12.25'];
    var yData = [20, 30, 40, 30, 40, 50, 40, 30];


    var gasAmount = [[${gasAmount}]];
    var date = [[${date}]];
    xData = []
    yData = []

    $(gasAmount).each(function (i, e) {
        yData.push(e);
    });
    $(date).each(function (i, e) {
        xData.push(e);
    });


    // 指定图表的配置项和数据
    var option = {
        legend: {
            data: ['气表'],
            right: '3%',
            selectedMode: false
        },
        title: {
            text: '一周气表走势图',
            x: 'center',
            textStyle: {
                fontSize: 26,
                color: '#2d353e'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '21%',
            bottom: '7%',
            left: '7%',
            right: '5%'
        },
        xAxis: {
            name: '日期',
            nameTextStyle: {
                color: '#333',
                fontSize: 18,
            },
            data: xData,
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#b8dbff'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333',
                    fontSize: 18,
                }
            }
        },
        yAxis: [{
            name: 'm³',
            nameTextStyle: {
                color: '#333',
                fontSize: 18,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ebeef1'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#b8dbff'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333',
                    fontSize: 18,
                }
            }
        }],
        series: [{
            name: '气表',
            type: 'line',
            barWidth: 12,
            symbolSize: 10,
            symbol: 'circle',
            emphasis: {
                itemStyle: {
                    color: '#ff6d10'
                }
            },
            itemStyle: {
                normal: {
                    color: '#ff6d10',
                    barBorderRadius: [0, 0, 0, 0],
                }
            },
            data: yData
        }]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</body>

</html>
